<script setup lang="ts">
import Son from "./components/SonCom.vue";
import HmButton from "./components/HmButton.vue";
import NavBar from "./components/NavBar.vue";
import { provide, ref } from "vue";

const myEvent = (age: number) => {
  console.log("子组件触发回调函数", age);
};
const getName = (name: string) => {
  console.log("子组件触发回调函数", name);
};


const totalCount = ref(100) 
provide('totalCount',totalCount)

provide('updateTotalCount',(num:number)=>{
  totalCount.value += num
})


const appTitle = ref('应用标题1')
const leftClick = (val: string) => {
  alert(val)
}
</script>

<template>
  <NavBar v-bind:title="appTitle" @left-click-handler="leftClick">
    <button>新按钮</button>
  </NavBar>
  
  <h1>App 根组件</h1>
  <button @click="totalCount++">修改数据+1</button>
  <p>{{ totalCount }}</p>
  <Son :name="'张三'" :age="18" @my-event="myEvent" @get-Name="getName($event)" />
  <Son :name="'李四'" :age="19" @my-event="myEvent" @get-Name="getName" />
  <HmButton :text="'父传-按钮'" />
  <HmButton />
</template>

<style scoped></style>
